<template>
  <div class="Category">
    <el-row :gutter="gutterNum">
      <el-col :span="6">
        <el-select
          v-if="options.GROWTH_CLASSIFY"
          v-model="ruleForm.GROWTH_CLASSIFY.cateId"
          style="width: 100%;"
          placeholder="请选择教学对象"
          @change="getStage(true)"
        >
          <el-option
            v-for="item in options.GROWTH_CLASSIFY"
            :key="item.cateId"
            :label="item.itemName"
            :value="item.cateId"
          />
        </el-select>
        <el-select v-else v-model="ruleForm.GROWTH_CLASSIFY.cateId" disabled placeholder="请选择">
          <el-option
            v-for="item in options.STAGE"
            :key="item.cateId"
            :label="item.itemName"
            :value="item.cateId"
          />
        </el-select>
      </el-col>

      <el-col :span="6">
        <el-select
          v-if="options.STAGE"
          v-model="ruleForm.STAGE.cateId"
          style="width: 100%;"
          placeholder="请选择学段"
          :disabled="ruleForm.GROWTH_CLASSIFY.cateId ? false : true"
          @change="getSubject(true)"
        >
          <el-option
            v-for="item in options.STAGE"
            :key="item.cateId"
            :label="item.itemName"
            :value="item.cateId"
          />
        </el-select>
        <el-select v-else v-model="ruleForm.STAGE.cateId" disabled placeholder="请选择">
          <el-option
            v-for="item in options.STAGE"
            :key="item.cateId"
            :label="item.itemName"
            :value="item.cateId"
          />
        </el-select>
      </el-col>

      <el-col v-if="options.SUBJECT" :span="6">
        <el-select
          v-if="options.SUBJECT"
          v-model="ruleForm.SUBJECT.cateId"
          style="width: 100%;"
          placeholder="请选择学科"
          :disabled="ruleForm.STAGE.cateId ? false : true"
          @change="callBack"
        >
          <el-option
            v-for="item in options.SUBJECT"
            :key="item.cateId"
            :label="item.itemName"
            :value="item.cateId"
          />
        </el-select>

        <el-select v-else v-model="ruleForm.SUBJECT.cateId" disabled placeholder="请选择">
          <el-option
            v-for="item in options.SUBJECT"
            :key="item.cateId"
            :label="item.itemName"
            :value="item.cateId"
          />
        </el-select>
      </el-col>
      <!-- <el-col v-else :span="6">
      <el-select v-model="ruleForm.SUBJECT.cateId" disabled placeholder="请选择">
        <el-option
          v-for="item in options.SUBJECT"
          :key="item.cateId"
          :label="item.itemName"
          :value="item.cateId"
        />
      </el-select>
      </el-col>-->
    </el-row>
  </div>
</template>

<script>
/** *
 bizTypeEnum: 业务类型
 * */
import { findByPCateId } from '@/api/content';
export default {
  name: 'Category',
  props: ['list', 'categoryType', 'bizTypeEnum', 'model', 'gutter'],
  data () {
    return {
      gutterNum: this.gutter || 0,
      options: {
        GROWTH_CLASSIFY: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        STAGE: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        SUBJECT: {
          cateId: '',
          itemCode: '',
          itemName: ''
        }
      },
      ruleForm: {
        GROWTH_CLASSIFY: this.list.GROWTH_CLASSIFY || {
          cateId: null,
          itemCode: null
        },
        STAGE: this.list.STAGE || { cateId: null, itemCode: null },
        SUBJECT: this.list.SUBJECT || { cateId: null, itemCode: null }
      }
    };
  },
  computed: {},
  watch: {},
  created () {
    // console.log('this.ruleForm:', this.ruleForm);
    this.init();
  },
  methods: {
    async init () {
      // 获取教学对象
      this.getCategory();
    },

    // 获取教学对象
    getCategory () {
      findByPCateId({ bizTypeEnum: this.bizTypeEnum }).then(res => {
        this.options.GROWTH_CLASSIFY = res.data.categoryVoList;
        this.getStage(false);
      });
    },

    // 获取学段
    getStage (isChange) {
      if (this.ruleForm.GROWTH_CLASSIFY && this.ruleForm.GROWTH_CLASSIFY.cateId) {
        findByPCateId({
          bizTypeEnum: this.bizTypeEnum,
          pCateId: this.ruleForm.GROWTH_CLASSIFY.cateId
        }).then(res => {
          this.options.STAGE = res.data.categoryVoList;
          this.ruleForm.STAGE = !isChange ? this.list.STAGE : this.defaultData();
          this.getSubject(isChange);
        });
      }
    },

    // 获取学科
    getSubject (isChange) {
      if (this.ruleForm.STAGE && this.ruleForm.STAGE.cateId) {
        findByPCateId({
          bizTypeEnum: this.bizTypeEnum,
          pCateId: this.ruleForm.STAGE.cateId
        }).then(res => {
          this.options.SUBJECT = res.data.categoryVoList;
          this.ruleForm.SUBJECT = !isChange ? this.list.SUBJECT
            : this.defaultData();

          console.log('this.ruleForm:', this.ruleForm);
          this.callBack();
        });
      }
    },

    // 更新数据
    update () {
      if (
        this.ruleForm.GROWTH_CLASSIFY &&
        this.ruleForm.GROWTH_CLASSIFY.cateId
      ) {
        var GROWTH_CLASSIFY = this.options.GROWTH_CLASSIFY.filter(
          item => item.cateId === this.ruleForm.GROWTH_CLASSIFY.cateId
        );
        this.list.GROWTH_CLASSIFY = GROWTH_CLASSIFY[0];
      } else {
        this.list.GROWTH_CLASSIFY = this.defaultData();
        this.ruleForm.GROWTH_CLASSIFY = this.defaultData();
      }
      if (this.ruleForm.STAGE && this.ruleForm.STAGE.cateId) {
        var STAGE = this.options.STAGE.filter(
          item => item.cateId === this.ruleForm.STAGE.cateId
        );
        this.list.STAGE = STAGE[0];
      } else {
        this.list.STAGE = this.defaultData();
        this.ruleForm.STAGE = this.defaultData();
      }
      if (this.ruleForm.SUBJECT && this.ruleForm.SUBJECT.cateId) {
        var SUBJECT = this.options.SUBJECT.filter(
          item => item.cateId === this.ruleForm.SUBJECT.cateId
        );
        this.list.SUBJECT = SUBJECT[0];
      } else {
        this.list.SUBJECT = this.defaultData();
        this.ruleForm.SUBJECT = this.defaultData();
      }
    },

    defaultData () {
      return {
        cateId: '',
        itemCode: '',
        itemName: ''
      };
    },

    // 返回数据
    callBack () {
      this.update();
      this.$emit('Callback', this.list);
    }
  }
};
</script>

<style lang="scss" scoped></style>
